<template>
  <div>
    <div id="container" />
  </div>
</template>

<script>
import { Graph } from '@antv/x6';
import { DagData } from './constant';

let graph = null;

export default {
  name: 'Example',
  data() {
    return {

    };
  },
  created() {},
  mounted() {
    this.initDagGraph();
  },
  methods: {
    // 初始化x6图编辑引擎
    initDagGraph() {
      graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        background: {
          color: '#fffbe6', // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
        panning: true, // 画布拖拽平移
      });
      // 装载流程图数据
      graph.fromJSON(DagData);
      // 缩放和平移
      graph.zoom(0.5);
      graph.translate(80, 40);
    },
  },

};
</script>

<style lang="scss" scoped>

</style>
